<template>
  <div>
    <h1>操作人员添加</h1>
    <el-form :model="admin" label-width="120px">
      <el-form-item label="姓名" required>
        <el-input
          v-model="admin.adminname"
          placeholder="4-9位用户名,首位字母(数字，字母，下划线)"
          @input="namefn"
        /><span>{{ nameval }}</span>
      </el-form-item>

      <el-form-item label="密码" required>
        <el-input
          v-model="admin.password"
          type="password"
          placeholder="6-9位字符(数字，字母，下划线)"
          @input="passfn"
        />
        <span>{{ passval }}</span>
      </el-form-item>

      <el-form-item label="角色">
        <el-radio-group v-model="admin.role">
          <el-radio :label="1">超级管理员</el-radio>
          <el-radio :label="2">普通管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 添加的权限选项 固定写法 -->
      <p>
        <el-tree
          ref="treeRef"
          :data="data"
          show-checkbox
          node-key="id"
          highlight-current
        />
      </p>
      <el-form-item>
        <el-button type="primary" @click="addAdmin">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang='ts'>
import { ElMessage, ElTable, ElTree } from "element-plus";
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { useRouter } from "vue-router";
import { menudata as data } from "../../../grants/menudata";
import { TreeKey } from "element-plus/es/components/tree/src/tree.type";
import { ElLoading } from "element-plus";
import "element-plus/dist/index.css";
let loading: any;

var reg = /^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;
var reg1 = /^[a-zA-Z0-9_]{6,9}$/;
const nameval = ref<string>("");
const passval = ref<any>();
const $router = useRouter();
interface IAdmin {
  adminname: string;
  password: string;
  role: number;
  checkedKeys: TreeKey[];
}
const admin = reactive<IAdmin>({
  adminname: "",
  password: "",
  role: 1,
  checkedKeys: [],
});
let treeRef = ref<InstanceType<typeof ElTree>>();

const addAdmin = () => {
  if (
    (!admin.adminname && !admin.password) ||
    !admin.adminname ||
    !admin.password
  ) {
    ElMessage({
      message: "请输入用户名和密码哦",
      type: "error",
    });
    loading.close();
  }
  let arr: TreeKey[] = treeRef.value!.getCheckedKeys(); //获取的是选中状态的菜单项。

  let halfArr: TreeKey[] = treeRef.value!.getHalfCheckedKeys(); //获取半选中状态的菜单项。

  arr = arr.concat(halfArr);
  admin.checkedKeys = arr;
  if (reg.test(admin.adminname) == true && reg1.test(admin.password) == true) {
    service({
      url: "/admin/add",
      method: "post",
      data: admin,
    }).then((res) => {
      console.log();
      if (res.data.code === "200") {
        ElMessage({
          message: "亲，恭喜您，添加成功!",
          type: "success",
        });
        $router.push("/home/adminlist");
      }
    });
  }
};
const namefn = () => {
  if (reg.test(admin.adminname)) {
    nameval.value = "";
  } else {
    nameval.value = "*请输入4-9位用户名,首位字母(数字，字母，下划线)";
  }
};
const passfn = () => {
  if (reg1.test(admin.password)) {
    passval.value = "";
  } else {
    passval.value = "*密码请输入6-9位字符(数字，字母，下划线)";
  }
};
</script>

<style scoped>
.el-input {
  width: 300px;
}
span {
  font-size: 12px;
  color: red;
  margin-left: 10px;
}
</style>